<template>
  <div>
    <Form :disabled="operation !== '1'" ref="formItem" :model="formItem" label-position="right" :rules="ruleValidate" :label-width="100">
      <Row :gutter="24">
        <Col span="8">
          <FormItem label="人员类别" prop="rrlb">
            <Select v-model="formItem.rrlb" clearable filterable @on-change="changeGzdw(formItem.rrlb)">
              <Option v-for="item in typeList" v-bind:key="item.xmmc" :value="item.xmmc">{{item.xmmc}}</Option>
            </Select>
          </FormItem>
        </Col>
<!--        <Col span="8">-->
<!--          <FormItem label="人员编号" prop="rrbh" >-->
<!--            <Input v-model="formItem.rrbh"></Input>-->
<!--          </FormItem>-->
<!--        </Col>-->
        <Col span="8">
          <FormItem label="姓名" prop="xm">
            <Input disabled v-model="formItem.xm"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="联系电话"  prop="lxdh">
            <Input v-model="formItem.lxdh"></Input>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="24">
        <Col span="8">
          <FormItem label="身份证号" prop="sfzh">
            <Input disabled v-model="formItem.sfzh"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="性别" prop="xb">
            <Input disabled v-model="formItem.xb"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="出生日期" prop="sr">
            <Input disabled v-model="formItem.sr"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="年龄" prop="nl">
            <Input disabled v-model="formItem.nl"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="婚姻状况" prop="hyzk">
            <Input v-model="formItem.hyzk"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="社保编号" prop="sbbh">
            <Input v-model="formItem.sbbh"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="参保经办机构" prop="jbjg">
            <Select v-model="formItem.jbjg" clearable filterable @on-change="getFfInfo(formItem.ffbz)">
              <Option v-for="item in companyList" v-bind:key="item.xmmc" :value="item.xmmc">{{item.xmmc}}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="健康状况" prop="jkzk">
            <Select v-model="formItem.jkzk">
              <Option value="良好">良好</Option>
              <Option value="一般">一般</Option>
              <Option value="残疾">残疾</Option>
              <Option value="死亡">死亡</Option>
            </Select>
<!--            <Input v-model="formItem.jkzk"></Input>-->
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="死亡时间" prop="swsj">
            <DatePicker v-model="formItem.swsj" type="date" style="width: 100%"></DatePicker>
          </FormItem>
        </Col>
      </Row>

      <Row :gutter="24">
        <Col span="16">
          <FormItem label="户籍所在地区县/街道/社区" prop="hj_address">
            <Select v-model="formItem.hj_address" clearable filterable @on-change="changeHjAddress(formItem.hj_address)">
              <Option v-for="item in communityList" v-bind:key="item.id" :value="item.id">{{item.xq}}{{item.jd}}{{item.xmmc}}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="户籍所在地-门牌" prop="hj_mp">
            <Input v-model="formItem.hj_mp"></Input>
          </FormItem>
        </Col>
      </Row>

      <Row :gutter="24">
        <Col span="16">
          <FormItem label="现住址区县/街道/社区" prop="zz_address">
            <Select v-model="formItem.zz_address" clearable filterable @on-change="changeZzAddress(formItem.zz_address)">
              <Option v-for="item in communityList" v-bind:key="item.id" :value="item.id">{{item.xq}}{{item.jd}}{{item.xmmc}}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="现住址-门牌" prop="hj_mp">
            <Input v-model="formItem.zz_mp"></Input>
          </FormItem>
        </Col>
      </Row>

      <Row :gutter="24">
        <Col span="8">
          <FormItem label="原工作单位" prop="gzdw">
            <Select v-model="formItem.gzdw" clearable filterable @on-change="getDwInfo(formItem.gzdw)">
              <Option v-for="item in attributesList" v-bind:key="item.xmmc" :value="item.xmmc">{{item.xmmc}}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="单位隶属" prop="dwsx">
            <Input v-model="formItem.dwsx"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="单位现状" prop="dwxz">
            <Input v-model="formItem.dwxz"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="与企业脱离劳动关系时间"  prop="tlgxsj">
            <DatePicker v-model="formItem.tlgxsj" type="date" style="width: 100%"></DatePicker>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="领光荣证时间"  prop="grzsj">
            <DatePicker v-model="formItem.grzsj" type="date" style="width: 100%"></DatePicker>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="退休时间"  prop="txsj">
            <DatePicker v-model="formItem.txsj" type="date" style="width: 100%"></DatePicker>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="24">
        <Col span="8">
          <FormItem label="退休方式"  prop="txfs">
            <Select v-model="formItem.txfs">
              <Option value="企业退休">企业退休</Option>
              <Option value="社会退休">社会退休</Option>
            </Select>
<!--            <Input v-model="formItem.txfs"></Input>-->
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="发放标准" prop="ffbz">
            <Select v-model="formItem.ffbz" clearable filterable @on-change="getFfInfo(formItem.ffbz)">
              <Option v-for="item in standardList" v-bind:key="item.xmmc" :value="item.xmmc">{{item.xmmc}}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="发放金额" prop="ffje" >
            <Input :disabled="formItem.ffbz !== 8" v-model="formItem.ffje"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="银行业务编码" prop="rhbm">
            <Input v-model="formItem.rhbm"></Input>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <div style="text-align: right">
      <Button v-if="code === ''" style="margin-right: 10px" size="large" type="success" @click="addok('formItem')">保存</Button>
      <Button v-if="code !== '' && this.$route.params.operation !== '2'" style="margin-right: 10px" size="large" type="info" @click="updateInfo('formItem')">保存</Button>
      <Button v-if="code !== '' && this.$route.params.operation === '2'" style="margin-right: 10px" size="large" type="info" @click="back('formItem')">返回</Button>
<!--      <Button :disabled="!formItem.single" v-if="formItem.operation === '1'" size="large" type="success" style="margin-right: 10px" @click="updateInfo">保存</Button>-->
    </div>
  </div>
</template>
<script>
import { date2str, updateOrder, createOrder } from '@/api/eventlist'
import { getUserAll, getPersonType, getHandleInfo, getStandardInfo, getAttributesInfo, getCompanyInfo } from '@/api/station.js'
export default {
  data () {
    return {
      ruleValidate: {
        rrlb: [ { required: true, message: '请选择人员类别', trigger: 'blur' } ],
        // rrbh: [ { required: true, message: '请输入人员编号', trigger: 'blur' } ],
        sfzh: [ { required: true, message: '请输入人员身份证号', trigger: 'blur' } ],
        xm: [ { required: true, message: '请输入姓名', trigger: 'blur' } ],
        xb: [ { required: true, message: '请输入性别', trigger: 'blur' } ],
        sr: [ { required: true, message: '请输入出生日期', trigger: 'blur' } ],
        nl: [ { required: true, message: '请输入年龄', trigger: 'blur', type: 'number' } ],
        hyzk: [ { required: true, message: '请输入婚姻状况', trigger: 'blur' } ],
        hj_address: [ { required: true, message: '请选择户籍所在地区县', trigger: 'blur', type: 'number' } ],
        hj_mp: [ { required: true, message: '请输入户籍所在地门牌', trigger: 'blur' } ],
        zz_address: [ { required: true, message: '请选择现住址区县', trigger: 'blur', type: 'number' } ],
        zz_mp: [ { required: true, message: '请输入现住址门牌', trigger: 'blur' } ],
        jkzk: [ { required: true, message: '请输入健康状况', trigger: 'blur' } ],
        gzdw: [ { required: true, message: '请选择原工作的单位', trigger: 'blur' } ],
        dwsx: [ { required: true, message: '请选择单位隶属', trigger: 'blur' } ],
        dwxz: [ { required: true, message: '请选择单位现状', trigger: 'blur' } ],
        txsj: [ { required: true, message: '请选择退休时间', trigger: 'blur', type: 'date' } ],
        txfs: [ { required: true, message: '请选择退休方式', trigger: 'blur' } ],
        ffbz: [ { required: true, message: '请选择发放标准', trigger: 'blur' } ],
        jbjg: [ { required: true, message: '请填写参保机构', trigger: 'blur' } ],
        ffje: [ { required: true, message: '请输入发放金额', trigger: 'blur', type: 'number' } ],
        lxdh: [ { required: true, message: '请输入联系电话', trigger: 'blur' } ]
      },
      operation: '1',
      code: '',
      formItem: {},
      userList: [], // 用户信息list
      typeList: [], // 人员类别list
      companyList: [], // 经办机构list
      standardList: [], // 发放标准list
      attributesList: [], // 单位现状list
      communityList: [] // 区县街道社区list
    }
  },
  methods: {
    changeGzdw (type) {
      if (type === '无业') {
      }
    },
    updateInfo (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.formItem.grzsj) {
            this.formItem.grzsj = date2str(this.formItem.grzsj)
          }
          if (this.formItem.swsj) {
            this.formItem.swsj = date2str(this.formItem.swsj)
          }
          if (this.formItem.txsj) {
            this.formItem.txsj = date2str(this.formItem.txsj)
          }
          let data = {
            item_id: this.$route.params.id,
            cardno: this.formItem.sfzh,
            name: this.formItem.xm,
            mobile: this.formItem.lxdh,
            code: this.code,
            form_params: this.formItem
          }
          this.updateOk(data)
        } else {
          this.$Message.error('请完善表单信息!')
        }
      })
    },
    addok (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          // this.$Message.success('Success!')
          if (this.formItem.grzsj) {
            this.formItem.grzsj = date2str(this.formItem.grzsj)
          }
          if (this.formItem.swsj) {
            this.formItem.swsj = date2str(this.formItem.swsj)
          }
          if (this.formItem.txsj) {
            this.formItem.txsj = date2str(this.formItem.txsj)
          }
          let data = {
            item_id: this.$route.params.itemid,
            cardno: this.formItem.sfzh,
            name: this.formItem.xm,
            mobile: this.formItem.lxdh
          }
          createOrder(data).then(res => {
            if (res.data.errcode === 0) {
              data.code = res.data.data
              data.form_params = this.formItem
              this.updateOk(data)
            } else { //
              this.$Notice.error({
                title: '订单创建失败',
                desc: res.data.errmsg
              })
            }
          })
        } else {
          this.$Message.error('请完善表单信息!')
        }
      })
    },
    updateOk (data) {
      updateOrder(data).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success('订单保存成功!')
          this.$router.push({
            name: 'workbench',
            params: {
            }
          })
        }
      })
    },
    getDwInfo (item) {
      let that = this
      that.attributesList.forEach(function (temp) {
        if (temp.xmmc === item) {
          that.formItem.dwsx = temp.qyls
          that.formItem.dwxz = temp.qyxz
        }
      })
    },
    changeHjAddress (item) {
      let that = this
      that.communityList.forEach(function (temp) {
        if (temp.id === item) {
          console.log(item)
          that.formItem.hj_xq = temp.xq
          that.formItem.hj_jd = temp.jd
          that.formItem.hj_sq = temp.xmmc
        }
      })
    },
    changeZzAddress (item) {
      let that = this
      that.communityList.forEach(function (temp) {
        if (temp.id === item) {
          that.formItem.zz_xq = temp.xq
          that.formItem.zz_jd = temp.jd
          that.formItem.zz_sq = temp.xmmc
        }
      })
    },
    getFfInfo (item) {
      let that = this
      that.standardList.forEach(function (temp) {
        if (temp.xmmc === item) {
          that.formItem.ffje = temp.bzje
        }
      })
    },
    getType () {
      getUserAll().then(res => {
        if (res.data.errcode === 0) {
          let data = res.data.data.data
          this.userList = JSON.parse(data)
        } else {
          this.$Notice.error({ title: '获取用户列表失败', desc: res.data.errmsg })
        }
      })
      getPersonType().then(res => {
        if (res.data.errcode === 0) {
          let data = res.data.data.data
          this.typeList = JSON.parse(data)
        } else {
          this.$Notice.error({ title: '获取人员状态失败', desc: res.data.errmsg })
        }
      })
      getHandleInfo().then(res => {
        if (res.data.errcode === 0) {
          let data = res.data.data.data
          this.companyList = JSON.parse(data)
        } else {
          this.$Notice.error({ title: '获取人员状态失败', desc: res.data.errmsg })
        }
      })
      getStandardInfo().then(res => {
        if (res.data.errcode === 0) {
          let data = res.data.data.data
          this.standardList = JSON.parse(data)
        } else {
          this.$Notice.error({ title: '获取人员状态失败', desc: res.data.errmsg })
        }
      })
      getAttributesInfo().then(res => {
        if (res.data.errcode === 0) {
          let data = res.data.data.data
          this.attributesList = JSON.parse(data)
        } else {
          this.$Notice.error({ title: '获取人员状态失败', desc: res.data.errmsg })
        }
      })
      getCompanyInfo().then(res => {
        if (res.data.errcode === 0) {
          let data = res.data.data.data
          this.communityList = JSON.parse(data)
        } else {
          this.$Notice.error({ title: '获取人员状态失败', desc: res.data.errmsg })
        }
      })
    },
    back () {
      this.$router.push({
        name: 'workbench',
        params: {
        }
      })
    }
  },
  mounted () {
    this.getType()
    console.log(this.$route.params.operation)
    if (this.$route.params.cardno) {
      this.formItem.xm = this.$route.params.name
      this.formItem.sfzh = this.$route.params.cardno
      if (parseInt(this.formItem.sfzh.substr(16, 1)) % 2 === 1) {
        this.formItem.xb = '男'
      } else {
        this.formItem.xb = '女'
      }
      let userCard = this.formItem.sfzh
      let yearBirth = userCard.substring(6, 10)
      let monthBirth = userCard.substring(10, 12)
      let dayBirth = userCard.substring(12, 14)
      let birthday = yearBirth + '-' + monthBirth + '-' + dayBirth
      // 获取当前年月日并计算年龄
      let myDate = new Date()
      let age = myDate.getFullYear() - yearBirth
      this.formItem.nl = age
      this.formItem.sr = birthday
    }
    if (this.$route.params.code) {
      this.code = this.$route.params.code
      this.operation = this.$route.params.operation
      this.formItem = this.$route.params.paramData
    }
  }
}
</script>
<style>
.ivu-input[disabled], fieldset[disabled] .ivu-select-input[disabled] .ivu-select-single {
  background-color: transparent;
  opacity: 1;
  cursor: not-allowed;
  color: black;
}
</style>
